<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="400px" style="height: 100vh">
        <el-card style="max-width: 400px; margin-bottom: 8px">
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            请填写文本
          </h1>
          <el-input v-model="input" placeholder="请填写文本" />
        </el-card>
        <el-card style="max-width: 400px">
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            返回图片数(可能被过滤部分)
          </h1>
          <el-slider v-model="value1" />
          <el-divider />
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            模型选择
          </h1>
          <el-radio-group
            v-model="radio1"
            style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
            "
          >
            <el-radio value="1" size="large" border style="margin-bottom: 12px"
              >中文CLIP(Bases)</el-radio
            >
            <el-radio value="2" size="large" border style="margin-bottom: 12px"
              >中文CLIP(Large)</el-radio
            >
            <el-radio value="3" size="large" border
              >中文CLIP(Large, 336分辨率)</el-radio
            >
          </el-radio-group>
          <el-divider />
          <h1 style="margin: 0; font-size: large; margin-bottom: 8px">
            是否返回缩略图
          </h1>
          <el-radio-group v-model="radio2">
            <el-radio value="1" size="large" border style="margin-bottom: 12px"
              >是</el-radio
            >
            <el-radio value="2" size="large" border style="margin-bottom: 12px"
              >否</el-radio
            >
          </el-radio-group>
          <el-divider />
          <el-button size="large" type="primary" plain style="width: 100%"
            >搜索</el-button
          >
        </el-card>
      </el-aside>
      <el-container>
        <el-main>
          <div>
            <div style="font-weight: 700; font-size: large; margin-bottom: 4px;">检索结果为:</div>
            <el-skeleton v-if="imagesLoading"  :rows="5" animated />
            <div  style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-right: 46px;">
              <div v-for="fit in images" :key="fit" class="block">
                <el-image style="width: 100%; height: 200px" :src="fit" :fit="'cover'" />
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { Document as IconDocument } from '@element-plus/icons-vue';
import { markRaw } from 'vue';

export default defineComponent({
  name: 'ImageSearch',
  components: {},
  data() {
    return {
      IconDocument: markRaw(IconDocument),
      list: null,
      listLoading: true,
      downloadLoading: false,
      filename: '',
      value1: 18,
      radio1: '1',
      radio2: '1',
      images: [],
      imagesLoading: false
    };
  },
  created() {
    this.fetchDogImagesParallel().then((dogImages) => {
      this.images = dogImages;
      this.imagesLoading = false;
    });
  },
  methods: {
    async fetchDogImagesParallel() {
      this.imagesLoading = true;
      return new Promise((resolve) => {
        setTimeout(() => {
          // 这里可以替换你的图片地址，图片放在 public 目录下，你可以自己取文件夹名称来分类
          // 想要显示几张，这里就放几张图片地址
          resolve([
            '../../../public/fileImage/images.jpeg',
            '../../../public/fileImage/下载.jpeg'
          ]);
        }, 2000);
      });
    }
  }
});
</script>

<style lang="scss" scoped>
.common-layout {
  width: 100vw;
  height: 100vh;
}
</style>
